<template>
  <div>
    <div class="leftContent">
      <el-scrollbar :max-height="maxHeight">
        <box class="mb-3" :wvalueth="480" :title="'数据管理'">
          <div class="mb-1">
            <p class="font-lan-gray-60">地图管理：</p>
            <el-row :gutter="16">
              <el-col :span="12">
                <coverage v-model="data.select" :placeholder="'图层管理'" :options="data.coverage" @change="slecetChange" />
              </el-col>
              <el-col :span="12">
                <maptype />
              </el-col>
            </el-row>
          </div>
          <div class="mb-1">
            <p class="font-lan-gray-60">数据来源：</p>
            <scCascader v-model="data.pullData" :placeholder="'数据管理'" :options="data.pullDatas" :label="'name'"
              :value="'id'" />
          </div>
          <div>
            <p class="font-lan-gray-60">数据范围：</p>
            <scCascader v-model="data.cascader" :placeholder="'地址管理'" :options="storage.state.area" :label="'name'"
              :value="'id'" @change="acscaderChange" />
          </div>
        </box>
        <box class="mb-3" :wvalueth="480" :title="'实时数据更新'">
          <decorate1 class="mb-2">
            <div class="d-flex jc-between">
              <div class="d-flex ai-center">
                <img :src="applet" alt="">
                <span class="font-lan ml-3">今日小程序更新：</span>
              </div>
              <div>
                <span class="font-num-l">{{}}</span>
                <span class="font-lan">条</span>
              </div>
            </div>
          </decorate1>
          <lineChartA :data="data.realTimeUpdateWeekData.chart" />
        </box>
      </el-scrollbar>
    </div>
    <div class="rightContent">
      <el-scrollbar :max-height="maxHeight">
        <box :width="480" :title="'投入品用量地块排行'">
          <div>
            <el-row :gutter="24" class="mb-3">
              <el-col :span="12">
                <el-cascader v-model="searchData.district" placeholder="按照镇村选择" :options="data.options"
                  :props="{ checkStrictly: true, label: 'name', value: 'name', }" @change="getTableList()"
                  clearable />
              </el-col>
              <el-col :span="12">
                <el-input v-model="searchData.personConfirmation" placeholder="按照权属人搜索" @change="getTableList()"
                  clearable />
              </el-col>
            </el-row>
            <div class="chartTable">
              <el-table :data="tableData" size="small" :height="270">
                <el-table-column type="index" label="排名" width="40" />
                <el-table-column prop="projectName" label="项目名称" width="70"></el-table-column>
                <el-table-column prop="projectName" label="建设单位"></el-table-column>
                <el-table-column prop="createTime" label="建设时间" width="80">
                  <template #default="scope">
                    {{moment(scope.row.createTime).format('YYYY-MM-DD')}}
                  </template>
                </el-table-column>
                <el-table-column prop="area" label="面积(亩)" width="60">
                  <template #default="scope">
                    {{parseFloat(scope.row.area).toFixed(1)}}
                  </template>
                </el-table-column>
                <el-table-column prop="place" label="地点" />
              </el-table>
              <div style="padding: 4px">
                <span class="description">当前结果共计显示：</span><span class="font-lan-m">{{ tableData.length }}块地，{{
                  tableData.reduce((sum, item) => sum + parseFloat(item.area), 0).toFixed(2)
                }}亩</span>
              </div>
            </div>
          </div>
        </box>
      </el-scrollbar>
    </div>
  </div>
</template>
  
<script lang="ts">
import { defineComponent, ref, reactive, onMounted, onUnmounted, computed } from "vue";
import pieB from "@/chart/pieChart/pic-bole";
import lineChartA from "@/chart/lineChart/line-area";
import { getCropColor } from "@/utils/common";
import mapControler from "@/components/mapContainer/mapControler";
import storage from '@/store'
import { useRouter } from 'vue-router';
import {
  agriculturalStatistics,
  plantStatistics,
  cropDetails
} from "@/public/request/http";
import moment from "moment";

export default defineComponent({
  components: {
    lineChartA
  },
  setup() {
    //变量
    // const maxHeight = ref(window.innerHeight-160+'px')
    const maxHeight = computed(() => window.innerHeight - 160 + 'px')
    const router = useRouter()
    const tableData = ref([])
    const data: any = reactive({
      coverage: [],
      select: null,
      pullDatas: [],
      pullData: [],
      cascader: [],
      adress: [],
      farmlands: [],
      warning: [],
      types: [
        { type: '0', value: '40', count: 780 },
        { type: '1', value: '20', count: 310 },
        { type: '2', value: '20', count: 100 },
        { type: '3', value: '20', count: 100 }],
      analysisItems: [
        { name: '用水总量', img: require('@/assets/img/city.png'), unit: '吨', count: 0 },
        { name: '用肥总量：', img: require('@/assets/img/agriculture.png'), unit: 'kg', count: 0 },
        { name: '用药总量：', img: require('@/assets/img/zoology.png'), unit: 'kg', count: 0 },
        { name: '用电总量：', img: require('@/assets/img/farmland.png'), unit: 'kW·h', count: 0 }],
      realTimeUpdateWeekData: {
        chart: {
          date: [],
          count: [],
        },
        toDayDataList: [],
        toDayNum: null,
      },
      tags: [{ name: '投入曲线', value: 0 }, { name: '年度对比', value: 0 }],
    });
    const searchData: any = reactive({
      personConfirmation: null,
      district: [],
      option1: 1,
      option2: 1,
    });
    const applet = require("@/assets/img/applet.png");
    const active = ref(0)
    // 生命周期
    onMounted(async () => {
      //
      data.pullDatas = [storage.state.dataSources[router.currentRoute.value.meta.index.toString()]]
      mapControler.mapReSet();
    });

    onUnmounted(() => {
      //
      mapControler.mapReSet();

    });

    //methods

    const getTableList = async () => {
      try {
        // let res = await tableList({
        //   personConfirmation: searchData.personConfirmation,
        //   town: searchData.district ? searchData.district[0] : null,
        //   village: searchData.district ? searchData.district[1] : null,
        //   organization: searchData.district ? searchData.district[2] : null,
        //   type: searchData.option1
        // });
        // tableData.value = res.dataTable.rows
        // // tableData.value = res
        // // res.forEach(item => {
        // //   item.color = 'rgba(61, 204, 147, 1)'
        // //   item.fillColor = 'rgba(61, 204, 147, 0.60)'
        // //   let point = calculateCenter(item.pointList)
        // //   item.point = point
        // //   item.sign = 1
        // //   item.type = '投入品'
        // //   mapControler.drawArea(item);
        // // });
      } catch (error) { }
    }

    const tagsChange = (item, index) => {
      active.value = index
    }

    const getAgriculturalStatistics = async () => {
      try {
        let res = await agriculturalStatistics();

      } catch (error) {
        return
      }
    };

    const getPlantStatistics = async () => {
      try {
        let res = await plantStatistics();
        data.farmlands = res.map(item => {
          return {
            name: getCropColor(item.type).name,
            background: getCropColor(item.type).color,
            value: parseFloat(item.ratio) * 100,
            count: item.sumArea
          }
        })
      } catch (error) {
        return
      }
    };

    const slecetChange = (e) => {
      console.log(e);

    }

    const acscaderChange = (e) => {
      console.log(data.cascader);
    }

    const getDetailByType = (val) => {
      let obj = {
        name: '',
        des: '',
        class: '',
        img: null
      }
      switch (val) {
        case '0':
          obj.name = '<30';
          obj.des = '%';
          obj.class = 'el-bg-inner-normal';
          obj.img = require("@/assets/img/decorate_n.png")
          break;
        case '1':
          obj.name = '30~40';
          obj.des = '%';
          obj.class = 'el-bg-inner-high';
          obj.img = require("@/assets/img/decorate_h.png")
          break;
        case '2':
          obj.name = '40~50';
          obj.des = '%';
          obj.class = 'el-bg-inner-low';
          obj.img = require("@/assets/img/decorate_l.png")
          break;
        case '3':
          obj.name = '50~60';
          obj.des = '%';
          obj.class = 'el-bg-inner-low';
          obj.img = require("@/assets/img/decorate2.png")
          break;
        default:
          obj.name = '>60';
          obj.des = '%';
          obj.class = '';
          obj.img = require("@/assets/img/decorate2.png");
          break;
      }
      return obj
    }


    // return
    return {
      data,
      applet,
      searchData,
      slecetChange,
      acscaderChange,
      moment,
      maxHeight,
      storage,
      active,
      tagsChange,
      tableData,
      getTableList
    };
  },
});
</script>
  
<style lang="scss" scoped>
@import "@/assets/scss/index.scss";

.tag {
  padding: 2px 10px;
  background: linear-gradient(90deg, rgba(82, 147, 204, 0.3) 0%, #5293CC 47%, rgba(82, 147, 204, 0.3) 100%);
  box-shadow: inset 0px 0px 8px 0px rgba(255, 255, 255, 0.16);
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  border: 1px solid;
  border-image: linear-gradient(90deg, rgba(153, 207, 255, 0), rgba(153, 207, 255, 0.3), rgba(153, 207, 255, 1), rgba(153, 207, 255, 0.3)) 1 1;
  text-align: center;
}

.active {
  position: relative;
  background: linear-gradient(351deg, #CCA352 0%, #F5D493 100%);
  border-radius: 2px 2px 2px 2px;
  border-image: linear-gradient(270deg, rgba(245, 212, 147, 1), rgba(255, 235, 153, 1)) 1 1;
}

.active::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  position: absolute;
  top: -4px;
  left: -4px;
  background: rgba(245, 196, 98, 0.6);
}

.active::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  position: absolute;
  right: -4px;
  bottom: -4px;
  background: rgba(245, 196, 98, 0.6);
}

.text-shadow {
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
}
</style>
  